<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时光印记 - 数字化记忆收藏馆</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        .serif-font {
            font-family: 'Noto Serif SC', serif;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .timeline-dot {
            width: 12px;
            height: 12px;
            background: #667eea;
            border-radius: 50%;
            position: absolute;
            left: -6px;
            top: 6px;
        }
        .timeline-line {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(to bottom, #667eea, #764ba2);
        }
        .drop-cap {
            float: left;
            font-size: 4rem;
            line-height: 1;
            font-weight: 700;
            margin-right: 0.5rem;
            margin-top: -0.2rem;
            color: #667eea;
        }
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
        .stat-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .animate-fadeInUp {
            animation: fadeInUp 0.8s ease-out;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-6">
        <div class="max-w-6xl mx-auto text-center animate-fadeInUp">
            <h1 class="text-5xl md:text-7xl font-bold mb-6 serif-font">时光印记</h1>
            <p class="text-xl md:text-2xl mb-8 opacity-90">记录生命中每一个珍贵瞬间</p>
            <div class="flex justify-center space-x-6 text-3xl">
                <i class="fas fa-camera opacity-80"></i>
                <i class="fas fa-heart opacity-80"></i>
                <i class="fas fa-clock opacity-80"></i>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-16 px-6 -mt-10">
        <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="stat-card rounded-xl p-6 text-center card-hover">
                <i class="fas fa-images text-4xl text-purple-600 mb-4"></i>
                <h3 class="text-3xl font-bold text-gray-800">23</h3>
                <p class="text-gray-600">珍贵记忆</p>
            </div>
            <div class="stat-card rounded-xl p-6 text-center card-hover">
                <i class="fas fa-calendar-alt text-4xl text-purple-600 mb-4"></i>
                <h3 class="text-3xl font-bold text-gray-800">2025</h3>
                <p class="text-gray-600">最新更新</p>
            </div>
            <div class="stat-card rounded-xl p-6 text-center card-hover">
                <i class="fas fa-sparkles text-4xl text-purple-600 mb-4"></i>
                <h3 class="text-3xl font-bold text-gray-800">∞</h3>
                <p class="text-gray-600">永恒价值</p>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <section class="py-16 px-6">
        <div class="max-w-6xl mx-auto">
            <!-- Introduction -->
            <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12 mb-12">
                <h2 class="text-3xl font-bold mb-6 serif-font text-gray-800">
                    <i class="fas fa-book-open text-purple-600 mr-3"></i>
                    数字记忆的艺术
                </h2>
                <div class="prose prose-lg max-w-none">
                    <p class="text-gray-700 leading-relaxed">
                        <span class="drop-cap serif-font">在</span>这个快速变化的数字时代，我们用影像和文字捕捉生活的点点滴滴。每一张照片都是时间的切片，每一个日期都标记着独特的故事。这里收藏着23个珍贵的瞬间，它们如同散落的星辰，共同构成了记忆的银河。
                    </p>
                </div>
            </div>

            <!-- Timeline Visualization -->
            <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12 mb-12">
                <h2 class="text-3xl font-bold mb-8 serif-font text-gray-800">
                    <i class="fas fa-timeline text-purple-600 mr-3"></i>
                    时光轨迹
                </h2>
                <div class="relative pl-8">
                    <div class="timeline-line"></div>
                    <div class="space-y-8">
                        <div class="relative">
                            <div class="timeline-dot"></div>
                            <div class="ml-6">
                                <h3 class="text-xl font-semibold text-gray-800">2025年的记忆</h3>
                                <p class="text-gray-600 mt-2">最新的23个瞬间，每一个都值得被永远珍藏</p>
                            </div>
                        </div>
                        <div class="relative">
                            <div class="timeline-dot"></div>
                            <div class="ml-6">
                                <h3 class="text-xl font-semibold text-gray-800">持续更新中</h3>
                                <p class="text-gray-600 mt-2">时光不停，记录不止，故事还在继续...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Concept Map -->
            <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12 mb-12">
                <h2 class="text-3xl font-bold mb-8 serif-font text-gray-800">
                    <i class="fas fa-project-diagram text-purple-600 mr-3"></i>
                    记忆网络
                </h2>
                <div class="mermaid">
                    graph TD
                        A[时光印记] --> B[图片记忆]
                        A --> C[时间标记]
                        A --> D[情感价值]
                        B --> E[23张珍贵影像]
                        C --> F[2025年更新]
                        D --> G[永恒收藏]
                        E --> H[每一帧都是故事]
                        F --> I[持续记录中]
                        G --> J[无价的回忆]
                        
                        style A fill:#667eea,stroke:#fff,stroke-width:3px,color:#fff
                        style B fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px
                        style C fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
                        style D fill:#fff3e0,stroke:#ff9800,stroke-width:2px
                </div>
            </div>

            <!-- Gallery Preview -->
            <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
                <h2 class="text-3xl font-bold mb-8 serif-font text-gray-800">
                    <i class="fas fa-photo-video text-purple-600 mr-3"></i>
                    影像诗篇
                </h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div class="aspect-square bg-gradient-to-br from-purple-400 to-pink-400 rounded-lg card-hover flex items-center justify-center">
                        <i class="fas fa-image text-white text-3xl opacity-80"></i>
                    </div>
                    <div class="aspect-square bg-gradient-to-br from-blue-400 to-purple-400 rounded-lg card-hover flex items-center justify-center">
                        <i class="fas fa-camera-retro text-white text-3xl opacity-80"></i>
                    </div>
                    <div class="aspect-square bg-gradient-to-br from-pink-400 to-orange-400 rounded-lg card-hover flex items-center justify-center">
                        <i class="fas fa-film text-white text-3xl opacity-80"></i>
                    </div>
                    <div class="aspect-square bg-gradient-to-br from-green-400 to-blue-400 rounded-lg card-hover flex items-center justify-center">
                        <i class="fas fa-palette text-white text-3xl opacity-80"></i>
                    </div>
                </div>
                <p class="text-center text-gray-600 mt-6">
                    <i class="fas fa-infinity mr-2"></i>
                    每一个方格都代表着一段独特的记忆，等待被探索和品味
                </p>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({ 
            startOnLoad: true,
            theme: 'default',
            themeVariables: {
                primaryColor: '#667eea',
                primaryTextColor: '#fff',
                primaryBorderColor: '#7c3aed',
                lineColor: '#5a67d8',
                secondaryColor: '#f3e5f5',
                tertiaryColor: '#e8f5e9'
            }
        });

        // Scroll animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -100px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-fadeInUp');
                }
            });
        }, observerOptions);

        document.querySelectorAll('.bg-white').forEach(el => {
            observer.observe(el);
        });
    </script>
</body>
</html>